import {
  defineComponent,
  PropType,
  h,
  ref,
  reactive,
  toRefs,
  onMounted,
  onUnmounted
} from 'vue'
import { NIcon, NLog } from 'naive-ui'
import Modal from '../modal'
import {
  DownloadOutlined,
  FullscreenExitOutlined,
  FullscreenOutlined,
  SyncOutlined
} from '@vicons/antd'
import screenfull from 'screenfull'
import utils from '@/utils'
import { queryLogReq } from '@/service/modules/task-instances'

const props = {
  showModalRef: {
    type: Boolean as PropType<boolean>,
    default: false
  },
  taskInstanceId: {
    type: Number as PropType<number>,
    required: true
  }
}

export default defineComponent({
  name: 'log-modal',
  props,
  emits: ['confirmModal'],
  setup(props, ctx) {
    const t = window.$t
    const variables = reactive({
      isFullscreen: false,
      logRef: '',
      logLoadingRef: ref(false),
      skipLineNum: ref(0),
      logLimit: ref(1000)
    })

    const change = () => {
      variables.isFullscreen = screenfull.isFullscreen
    }

    const renderIcon = (icon: any) => {
      return () => h(NIcon, null, { default: () => h(icon) })
    }

    const confirmModal = () => {
      variables.isFullscreen = false
      ctx.emit('confirmModal', props.showModalRef)
    }

    const getLogs = async () => {
      variables.logLoadingRef = true
      await queryLogReq({
        taskInstanceId: Number(props.taskInstanceId),
        limit: variables.logLimit,
        skipLineNum: variables.skipLineNum
      })
        .then((res: any) => {
          if (res.data) {
            variables.logRef += res.data
            variables.logLimit += 1000
            variables.skipLineNum += 1000
            getLogs()
          }
        })
        .catch()
      variables.logLoadingRef = false
    }

    const refreshLogs = () => {
      variables.logRef = ''
      variables.logLimit = 1000
      variables.skipLineNum = 0
      getLogs()
    }

    const handleFullScreen = () => {
      screenfull.toggle(document.querySelectorAll('.logModalRef')[0])
    }

    const downloadLogs = () => {
      utils.downloadFile('log/download-log', {
        taskInstanceId: props.taskInstanceId
      })
    }

    onMounted(() => {
      screenfull.on('change', change)
    })

    onUnmounted(() => {
      screenfull.on('change', change)
    })

    return {
      t,
      renderIcon,
      confirmModal,
      refreshLogs,
      downloadLogs,
      handleFullScreen,
      ...toRefs(variables)
    }
  },
  watch: {
    taskInstanceId() {
      this.refreshLogs()
    }
  },
  render() {
    const {
      t,
      renderIcon,
      refreshLogs,
      downloadLogs,
      isFullscreen,
      handleFullScreen
    } = this
    return (
      <Modal
        class='logModalRef'
        title={t('task.viewLog')}
        show={this.showModalRef}
        cancelShow={false}
        onConfirm={this.confirmModal}
        style={{ width: '60%' }}
        headerLinks={ref([
          {
            text: t('task.downloadLog'),
            show: true,
            action: downloadLogs,
            icon: renderIcon(DownloadOutlined)
          },
          {
            text: t('task.refresh'),
            show: true,
            action: refreshLogs,
            icon: renderIcon(SyncOutlined)
          },
          {
            text: isFullscreen
              ? t('task.cancelFullScreen')
              : t('task.fullScreen'),
            show: true,
            action: handleFullScreen,
            icon: isFullscreen
              ? renderIcon(FullscreenExitOutlined)
              : renderIcon(FullscreenOutlined)
          }
        ])}
      >
        <NLog
          rows={30}
          log={this.logRef}
          loading={this.logLoadingRef}
          style={{ height: isFullscreen ? 'calc(100vh - 140px)' : '500px' }}
        />
      </Modal>
    )
  }
})
